<script lang="ts" setup>


import type { ActionSheetAction } from 'vant';
import { onMounted, ref } from 'vue';





export interface userMessage {

  id: string
  name: string
  photo: string
  mobile: string
  gender: string
  birthday: string
}
interface Ibir {
  selectedValues: string[]
  selectedOptions: {
    text: string
    value: string
  }[]
  selectedIndexes: number[]
}
declare const jk: {
  getToken: () => string
  GetUserMessage: () => Promise<userMessage>

  pickerCamera: () => Promise<string>
  upPhoto: () => Promise<string>
}

onMounted(async () => {
  usermessage.value = await jk.GetUserMessage()



})
const isshowavatar = ref(false)
const isshowgander = ref(false)
const isshowname = ref(false)
const isshowbir = ref(false)

const isshowphonenumber = ref(false)
const name = ref('王日火')
const changeavatar = () => {
  isshowavatar.value = true
}
const gander = ref('男')
// 用户信息
const usermessage = ref<userMessage>({
  id: '',
  name: '',
  photo: '',
  mobile: '',
  gender: '',
  birthday: ''
})
const selectdander = (action: ActionSheetAction, index: number) => {
  if (index == 0) {
    gander.value = '男'

    isshowgander.value = false
  } else {

    gander.value = '女'
    isshowgander.value = false
  }
}
const select = (action: ActionSheetAction, index: number) => {
  if (index == 0) {
    console.log(index)
    //调用相机
    jk.pickerCamera()
  } else {
    //打开相册
    jk.upPhoto()
  }
}
const bir = ({ selectedValues }: Ibir) => {
  console.log(selectedValues)
}
</script>

<template>

  <div style="padding-left: 20px;padding-right: 20px;padding-top: 10px; ">
    <div>
      <div
        style="display: flex;justify-content: space-between ; align-items: center;  border-bottom:1px solid #D1D1D2;  padding: 5px; background-color: white;">
        <span class="avatar">头像</span>

        <div>
          <img :src="usermessage?.photo" @click="changeavatar" alt="" width="30" height="30"
            style="border-radius: 15px;">
          <img src='./image/jinrujiantou.svg' width="30" height="30">
        </div>

      </div>

      <div
        style="display: flex;justify-content: space-between ; align-items: center;  border-bottom:1px solid #D1D1D2;  padding: 8px; background-color: white;">
        <span class="avatar">昵称</span>

        <div style="display: flex;align-items: center;">
          <span @click="isshowname = true">{{ usermessage.name }}</span>
          <img src='./image/jinrujiantou.svg' width="30" height="30">
        </div>

      </div>


      <div
        style="display: flex;justify-content: space-between ; align-items: center;  border-bottom:1px solid #D1D1D2;  padding: 8px; background-color: white;">
        <span class="avatar">简介</span>

        <div style="display: flex;align-items: center;">
          <span @click="isshowphonenumber = true">{{ usermessage?.id }}</span>
          <img src='./image/jinrujiantou.svg' width="30" height="30">
        </div>

      </div>
    </div>

    <div style="margin-top: 20px;">


      <div
        style="display: flex;justify-content: space-between ; align-items: center;  border-bottom:1px solid #D1D1D2;  padding: 8px; background-color: white;">
        <span class="avatar">性别</span>

        <div style="display: flex;align-items: center;">
          <span @click="isshowgander = true">{{ usermessage?.gender }}</span>
          <img src='./image/jinrujiantou.svg' width="30" height="30">
        </div>

      </div>

      <div
        style="display: flex;justify-content: space-between ; align-items: center;  border-bottom:1px solid #D1D1D2;  padding: 8px; background-color: white;">
        <span class="avatar">生日</span>

        <div style="display: flex;align-items: center;">
          <span @click="isshowbir = true">{{ usermessage?.birthday }}</span>
          <img src='./image/jinrujiantou.svg' width="30" height="30">
        </div>

      </div>


    </div>
    <!-- 上传头像弹层 -->
    <VanActionSheet cancel-text="取消" v-model:show="isshowavatar" :actions="[{ name: '拍照' }, { name: '相册' }]"
      @select="select"></VanActionSheet>
    <!-- 昵称 -->
    <VanPopup style="width: 100%;" v-model:show="isshowname" position:bottom>
      <VanField style="width: 100%; height:100%;" placeholder="请输入用户名" :model-value="name"></VanField>
      <!--手机号  -->
    </VanPopup>
    <VanPopup style="width: 100%;" v-model:show="isshowphonenumber" position:bottom>
      <VanField style="width: 100%; height:100%;" placeholder="请输入手机号"></VanField>
    </VanPopup>
    <!-- 性别 -->
    <VanActionSheet cancel-text="取消" v-model:show="isshowgander" :actions="[{ name: '男' }, { name: '女' }]"
      @select="selectdander"></VanActionSheet>
    <!-- 日期 -->
    <VanPopup v-model:show="isshowbir" position="bottom">
      <VanDatePicker :max-date="new Date(new Date())" :min-date="new Date('1900-01-01')" @confirm="bir"></VanDatePicker>
    </VanPopup>


  </div>
</template>

<style scoped>
.avatar {
  font-size: 15px;
}
</style>
